<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>在线编辑{{ filename }}</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
  <link href="/static/codemirror/lib/codemirror.css" rel="stylesheet">
</head>
<body>
 
<form class="layui-form" action="/sys/savefile/" method="POST">
  <div class="layui-form-item layui-form-text">
      <textarea name="content" id="content"  class="layui-textarea">{{ fileval }}</textarea>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block" style="margin-left: 85vw" >
      <button class="layui-btn" style="position:fixed;right:20px;bottom:20px;z-index:2" lay-submit lay-filter="editor" id="save_file">立即提交</button>
    </div>
  </div>
  <input type="hidden" name="ip" value="{{ ip }}"/>
  <input type="hidden" name="filename" value="{{ filename }}"/>
  <input type="hidden" name="cd_dir" value="{{ cd_dir }}"/>
  <input type="hidden" name="save_file" value="{{ save_file }}"/>
</form>
 
<script src="/static/layui/layui.js"></script>
<script src="/static/codemirror/lib/codemirror.js"></script>
<script src="/static/codemirror/mode/modeAll.js"></script>
<script src="/static/codemirror/addon/edit/editAll.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form', 'jquery'], function(){
	var layer = layui.layer,form = layui.form; var $ = layui.jquery;
	var textarea = document.getElementById('content');
	var editor = CodeMirror.fromTextArea(textarea, {
		lineNumbers: true, 
		styleActiveLine: true, 
		matchBrackets: true, 
		mode: "text/x-c", 
		lineWrapping: false, 
		foldGutter: true, 
	});
	form.on('submit(editor)', function(data){
		editor.save();
		delete(data.field.content);
		data.field.content = editor.getValue();
		console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
		$.ajax({
             url: "/sys/savefile/",
             type: "POST",
			 dataType : 'json',
             data: data.field,
             success: function(data) {
                    layer.msg(data.msg)

             }
        });
		return false;
	});
});






</script> 
</body>
</html>